<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>WebGL Demo</title>
  </head>
  <body>
    <!-- 1、创建画布，用于webgl渲染 -->
    <canvas id="c"></canvas>
    <!-- 2、定义顶点着色器代码 -->
    <!-- 接收一个顶点属性 a_position，并将其直接赋值给 gl_Position -->
    <script
      id="vertex-shader-2d"
      type="notjs"
    >
      attribute vec4 a_position;
      void main() {
        gl_Position = a_position;
      }
    </script>
    <!-- 3、 定义片段着色器代码  -->
    <!-- 设置所有像素的颜色为红紫色（vec4(1, 0, 0.5, 1)） -->
    <script
      id="fragment-shader-2d"
      type="notjs"
    >
      precision mediump float;
      void main() {
        gl_FragColor = vec4(1, 0, 0.5, 1); // 红紫色
      }
    </script>
    <script src="1.js"></script>
  </body>
</html>
